﻿@page "/datetimepickers"

<h3>@Localizer["Title"]</h3>

<h4>@Localizer["H1"]</h4>

<DemoBlock Title="@Localizer["Block1Title"]" Introduction="@Localizer["Block1Intro"]" Name="Normal">
    <div style="width: 320px;">
        <DatePickerBody ValueChanged="@DateValueChanged" ShowFooter="false" />
    </div>
    <BlockLogger @ref="DateLogger" class="mt-3" />
</DemoBlock>

<DemoBlock Title="@Localizer["Block2Title"]" Introduction="@Localizer["Block2Intro"]" Name="ValueChanged">
    <TimePickerBody Value="@TimeNow" ValueChanged="@TimeValueChanged" />

    <BlockLogger @ref="TimeLogger" class="mt-3" />
</DemoBlock>

<DemoBlock Title="@Localizer["Block3Title"]" Introduction="@Localizer["Block3Intro"]" Name="Time">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <div class="d-flex flex-column">
                <div class="mb-1"><code>TimeSpan</code> @Localizer["codetext"]</div>
                <TimePickerBody @bind-Value="@SpanValue" />
                <BootstrapInput @bind-Value="@SpanValue" Formatter="@FormatterSpanString" style="width: 180px; margin-top: 0.5rem;" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="d-flex flex-column">
                <div class="mb-1"><code>string</code> @Localizer["codetext"]</div>
                <TimePickerBody Value="@TimeNow" ValueChanged="@OnValueChange" />
                <BootstrapInput @bind-Value="@SpanValue2" style="width: 180px; margin-top: 0.5rem;" />
            </div>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block4Title"]" Introduction="@Localizer["Block4Intro"]" Name="ValidateForm">
    <ValidateForm Model="this">
        <div class="row g-3">
            <div class="col-12 col-sm-auto">
                <DateTimePicker @bind-Value="@this.ModelValidateValue" />
            </div>
            <div class="col-12 col-sm-auto align-self-end">
                <Button ButtonType="ButtonType.Submit" Text="@SubmitText" Icon="fa-solid fa-floppy-disk" />
            </div>
        </div>
    </ValidateForm>
</DemoBlock>

<DemoBlock Title="@Localizer["Block5Title"]" Introduction="@Localizer["Block5Intro"]" Name="Date">
    <div class="row">
        <div class="col-sm-4">
            <DateTimePicker TValue="DateTime" Value="@DateTime.Today" />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block6Title"]" Introduction="@Localizer["Block6Intro"]" Name="Placement">
    <div class="row g-3">
        <div class="col-sm-6">
            <DateTimePicker TValue="DateTime?" Value="@BindValue" ValueChanged="@DateTimeValueChanged" Placement="Placement.Right" />
        </div>
        <div class="col-sm-6">
            <input class="form-control" @bind="@BindValueString" />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block7Title"]" Introduction="@Localizer["Block7Intro"]" Name="ViewMode">
    <p>@((MarkupString)Localizer["P1"].Value)</p>
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <DateTimePicker TValue="DateTime" ShowLabel="true"DisplayText="Year" ViewMode="DatePickerViewMode.Year" Format="yyyy" />
        </div>
        <div class="col-12 col-sm-6">
            <DateTimePicker TValue="DateTime" ShowLabel="true" DisplayText="Month" ViewMode="DatePickerViewMode.Month" Format="yyyy-MM" />
        </div>
        <div class="col-12 col-sm-6">
            <DateTimePicker TValue="DateTime" ShowLabel="true" DisplayText="Date" ViewMode="DatePickerViewMode.Date" Format="yyyy-MM-dd" />
        </div>
        <div class="col-12 col-sm-6">
            <DateTimePicker TValue="DateTime" ShowLabel="true" DisplayText="DateTime" ViewMode="DatePickerViewMode.DateTime" Format="yyyy-MM-dd HH:mm:ss" />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block8Title"]" Introduction="@Localizer["Block8Intro"]" Name="NullValue">
    <p>@((MarkupString)Localizer["P2"].Value)</p>
    <div class="row g-3">
        <div class="col-12 col-sm-8">
            <DateTimePicker TValue="DateTime?" @bind-Value="@BindNullValue" />
        </div>
        <div class="col-12 col-sm-4">
            <Display TValue="string" Value="@GetNullValueString" />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block9Title"]" Introduction="@Localizer["Block9Intro"]" Name="ShowLabel">
    <p>@((MarkupString)Localizer["P3"].Value)</p>
    <p>@((MarkupString)Localizer["P4"].Value)</p>
    <div class="row">
        <div class="col-12">
            <DateTimePicker TValue="DateTime?" @bind-Value="@BindNullValue" DisplayText="@Localizer["DisplayText"]" ShowLabel="true" />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block10Title"]" Introduction="@Localizer["Block10Intro"]" Name="Disalbed">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <DateTimePicker TValue="DateTime" IsDisabled="IsDisabled" />
        </div>
        <div class="col-12 col-sm-6">
            <Switch @bind-Value="@IsDisabled" />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block11Title"]" Introduction="@Localizer["Block12Title"]" Name="ViewModel">
    <div class="row">
        <div class="col-12">
            <DateTimePicker TValue="DateTime" ShowSidebar="true" ViewMode="DatePickerViewMode.DateTime" />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block12Title"]" Introduction="@Localizer["Block12Intro"]" Name="MinValue">
    <div class="row">
        <div class="col-12">
            <DateTimePicker TValue="DateTime" ViewMode="DatePickerViewMode.Date" Value="@(DateTime.Today.AddDays(3 - DateTime.Today.Day))"
                            MinValue="@(DateTime.Today.AddDays(1 - DateTime.Today.Day))" MaxValue="@(DateTime.Today.AddDays(46 - DateTime.Today.Day))" />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["BlockAutoCloseTitle"]" Introduction="@Localizer["BlockAutoCloseIntro"]" Name="AutoClose">
    <div class="row">
        <div class="col-12">
            <DateTimePicker TValue="DateTime" ViewMode="DatePickerViewMode.Date" Value="@(DateTime.Today.AddDays(3 - DateTime.Today.Day))"
                            AutoClose="false" />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["BlockGroupTitle"]" Introduction="@Localizer["BlockGroupIntro"]" Name="Group">
    <div class="row g-3">
        <div class="col-12 col-sm-6 col-md-4">
            <BootstrapInputGroup>
                <BootstrapInputGroupLabel DisplayText="@Localizer["BlockGroupPrevLabel"]" />
                <DateTimePicker TValue="DateTime" ViewMode="DatePickerViewMode.Date" />
            </BootstrapInputGroup>
        </div>
        <div class="col-12 col-sm-6 col-md-4">
            <BootstrapInputGroup>
                <DateTimePicker TValue="DateTime" ViewMode="DatePickerViewMode.Date" />
                <BootstrapInputGroupLabel DisplayText="@Localizer["BlockGroupSuffixLabel"]" />
            </BootstrapInputGroup>
        </div>
        <div class="col-12 col-sm-6 col-md-4">
            <BootstrapInputGroup>
                <BootstrapInputGroupLabel DisplayText="@Localizer["BlockGroupPrevLabel"]" />
                <DateTimePicker TValue="DateTime" ViewMode="DatePickerViewMode.Date" />
                <BootstrapInputGroupLabel DisplayText="@Localizer["BlockGroupSuffixLabel"]" />
            </BootstrapInputGroup>
        </div>
    </div>
</DemoBlock>

<AttributeTable Items="@GetAttributes()" />

<EventTable Items="@GetEvents()" />
